<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple" style="text-align: center">
        <h2>客户订单统计</h2>
      </div></el-col>
    </el-row>
    <br>
    <Template :tableinfo="tableinfo" :totalmsg="totalmsg" :tabledate="tabledate" @init="init" ></Template>
    <div style="float: right;width: 350px;height: 300px;margin-top: 40px;margin-right: 100px">
      <el-card class="box-card loginCl">
        <div slot="header" class="clearfix">
          <h3 style="align-content: center;text-align: center">查询客户订单统计信息</h3>
        </div>
        <div class="text item">
          <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row class="row-class">
              <el-col :span="24"><div class="grid-content bg-purple-light">
                <el-form-item label="客户名称" prop="username">
                  <el-input v-model.number="ruleForm.providername"></el-input>
                </el-form-item>
              </div>
              </el-col>
            </el-row>
            <el-row class="row-class">
              <el-col :span="24"><div class="grid-content bg-purple-light">
                <el-form-item label="起始日期" prop="password">
                  <el-input type="date" v-model="ruleForm.starttime" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              </el-col>
            </el-row>
            <el-row class="row-class">
              <el-col :span="24"><div class="grid-content bg-purple-light">
                <el-form-item label="结束日期" prop="password">
                  <el-input type="date" v-model="ruleForm.endtime" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              </el-col>
            </el-row>

            <div>
              <el-form-item style="align-content: center;text-align: center">
                <el-button type="primary" @click="select">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Template from "@/components/Template";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "BuyInfo",
  components:{
    // eslint-disable-next-line vue/no-unused-components
    Template
  },
  data(){
    return{
      tableinfo:[['销售总金额',"allBuyMoney"],['客户名称',"clientName"]],

      tabledate:[],
      totalmsg:10,

      selectOS:false,

      ruleForm:{
        providername:'',
        starttime:'1990-01-01',
        endtime:'2099-12-30'
      }
    }
  },
  methods:{
      init(pageNum,pageSize){
        let url = ''
        if (this.selectOS == true){
          url = "apj/saleinfo/clientCountByInfo"
          let fd = new FormData
          fd.append("pageNum",pageNum)
          fd.append("pageSize",pageSize)
          fd.append("name",this.ruleForm.providername)
          fd.append("startTime",this.ruleForm.starttime)
          fd.append("endTime",this.ruleForm.endtime)
          this.$axios.post(url,fd).then(r=>{
            let msg = r.data
            this.totalmsg = msg.count
            this.tabledate = msg.list
          })
        }else{
          url = "apj/saleinfo/clientCount/"+pageNum+"/"+pageSize
          this.$axios.get(url).then(r=>{
            let msg = r.data
            this.totalmsg = msg.count
            this.tabledate = msg.list
          })
        }
      },
      select(){
        this.selectOS = true
        this.init(1,4)
      }
  }
}
</script>

<style scoped>

</style>